import React from 'react'
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';
import { Component } from 'react-navigation';
import PropTypes from 'prop-types';
import Icon from 'react-native-vector-icons/FontAwesome';

//screen
import Home from '../home/Home'
import User from '../user/User'
import Login from '../login/Login'
import Purchase from '../purchase/Purchase'
import PurchaseDetail from '../purchase/PurchaseDetail'

const deskTopNavigator = createStackNavigator(
    {
        Home: Home,
        Purchase: Purchase,
        PurchaseDetail: PurchaseDetail,
    },
    //屏幕之间共享的参数
    {
        navigationOptions: {
            backgroundColor: '#f7f7fa',
            lineHeight: 35
        }
    }
)

const userNavigator = createStackNavigator(
    {
        User: User,
        Login: Login
    }
)
deskTopNavigator.navigationOptions = {
    tabBarLabel:"工作台"
}
userNavigator.navigationOptions = {
    tabBarLabel:"我的"
}
export default AppNavigator = createBottomTabNavigator(
    {
        Desktop: deskTopNavigator,
        My: userNavigator,
    },
    {
        navigationOptions: ({ navigation }) => ({
            tabBarIcon: ({ focused, tintColor }) => {
                const { routeName } = navigation.state;
                let iconName;
                if (routeName === 'Desktop') {
                    iconName = `desktop`;
                } else if (routeName === 'My') {
                    iconName = `user`;
                }

                // You can return any component that you like here! We usually use an
                // icon component from react-native-vector-icons
                return <Icon name={iconName} size={25} color={tintColor} />;
            },

        }),
        tabBarOptions: {
            activeTintColor: '#04BE02',
            inactiveTintColor: 'gray',
        },
    }
)